<template>
  <div class="music">
    <el-card>
      <div class="input">
        <i class="el-icon-search" @click="getmusic"></i>
        <input type="text" placeholder="搜索音乐/MV/歌单/歌手" class="in" v-model="queryinfo.key">
      </div>
      <ul class="infinite-list"  style="overflow:auto;margin-top:15px">
        <li v-for="item in musiclist" :key="item.musicrid" class="infinite-list-item">
          <div class="pic" @click="getmusicbyid(item)" :style="{'backgroundImage':'url('+item.pic+')'}">
            <!-- <img :src="item.pic" alt="未找到" :title="item.name"> -->
            <div class="icon_play">
              <i class="el-icon-caret-right"></i>
            </div>
          </div>
          <div class="artist">
            <span>{{item.name}}</span>
            <span>{{item.artist}}</span>
          </div>
        </li>
      </ul>
      <aplayer style="margin-top:15px" showLrc
        :music="music_info"
      />
    </el-card>
  </div>
</template>

<script>
import Aplayer from 'vue-aplayer'
Aplayer.disableVersionBadge = true
export default {
  components: {
        Aplayer
    },
  data() {
    return {
      queryinfo: {
        key:"星辰大海",
        pn:1,
        rn:10,
      },
      musiclist:[],
      music_info:{
        title: "音乐之林",
        artist: "周总",
        src: " ",
        pic: "",
      },
    };
  },
  methods:{
    async getmusic() {
      const {data:res} =await this.$http.get("search/searchMusicBykeyWord",{params:this.queryinfo})
      // console.log(res.data.list);
      this.musiclist=res.data.list; 
      // console.log(100);
    },
    async getmusicbyid(info) {
      const {data:res} =await this.$http.get("url",{params:{rid:info.rid}})
      const {data:lrc} =await this.$http.get("lrc",{params:{musicId:info.rid}})
      const data_info = {
          title: info.name,
          artist: info.artist,
          src: res.url,
          pic: info.pic,
          lrc:lrc.data.list
        }
        this.music_info=data_info;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.el-card {
  width: 1000px;
  margin: 0 auto;
}
.infinite-list {
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 7%), 0 1px 5px 0 rgb(0 0 0 / 10%);
  border-radius: 2px;
  padding: 0 20px;
  transition: all 1s;
  height: 400px;
  
}
.infinite-list-item {
  background-color: #e8f3fe;
  margin: 12px 0;
  border-radius: 5px;
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 7%), 0 1px 5px 0 rgb(0 0 0 / 10%);
  overflow: hidden;
}
.infinite-list-item .pic, .pic img{
  width: 66px;
  height: 66px;
}
.pic .icon_play {
  position: relative;
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  left: 50%;
  top: 50%;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  opacity: .8;
  text-shadow: 0 1px 1px rgb(0 0 0 / 20%);
  box-shadow: 0 1px 1px rgb(0 0 0 / 20%);
  background: rgba(0,0,0,.2);
}
.pic {
  background-repeat: no-repeat;
  background-size: cover;
}
.icon_play i {
  position: absolute;
  top: 3px;
  left: 4px;
  height: 20px;
  width: 20px;
  font-size: 20px;
  color: white;
}
.artist {
  height: 66px;
  width: 500px;
  margin-left: 20px;
  box-sizing: border-box;
  padding-top: 15px;
}
.artist , .pic {
  float: left;
  cursor: pointer;
}
.artist span:nth-child(1){
  font-size: 14px;
}
.artist span:nth-child(2){
  margin-left: 10px;
  font-size: 12px;
  color: #666;
}
.input i {
  position: absolute;
  left: 5px;
  width: 30px;
  line-height: 35px;
  font-size: 16px;
  cursor: pointer;
}
.input {
  position: relative;
  width: 294px;
}
.in {
  padding: 0 0 0 30px;
  width: 100%;
  height: 35px;
  background: #f5f5f5;
  border: none;
  outline: none;
}
</style>
